<template>
  <footer class="modern-footer">
    <div class="footer-top">
      <div class="container">
        <div class="footer-grid">
          <!-- 公司信息 -->
          <div class="footer-column about-column">
            <div class="footer-logo">
              <div class="footer-logo-icon">
                <i class="el-icon-shopping-bag-1"></i>
              </div>
              <div class="footer-logo-text">
                <h3>农产品金融销售平台</h3>
                <p>新鲜、健康、品质保障</p>
              </div>
            </div>
            <p class="company-description">
              我们致力于为消费者提供优质的农产品，同时为农户提供金融支持，
              打造一个连接农产品生产者与消费者的绿色桥梁。
            </p>
            <div class="social-links">
              <a href="#" class="social-icon"><i class="el-icon-s-custom"></i></a>
              <a href="#" class="social-icon"><i class="el-icon-chat-dot-round"></i></a>
              <a href="#" class="social-icon"><i class="el-icon-share"></i></a>
              <a href="#" class="social-icon"><i class="el-icon-position"></i></a>
            </div>
          </div>
          
          <!-- 快速链接 -->
          <div class="footer-column">
            <h4 class="footer-title">快速链接</h4>
            <ul class="footer-links">
              <li><a @click="goToPage('/')">首页</a></li>
              <li><a @click="goToPage('/products')">全部商品</a></li>
              <li><a @click="goToPage('/products?tag=new')">新品上市</a></li>
            </ul>
          </div>
          
          <!-- 产品分类 -->
          <div class="footer-column">
            <h4 class="footer-title">产品分类</h4>
            <ul class="footer-links">
              <li v-for="(category, index) in categories.slice(0, 6)" :key="index">
                <a @click="goToCategory(category)">{{ category.name }}</a>
              </li>
            </ul>
          </div>
          
          <!-- 联系我们 -->
          <div class="footer-column contact-column">
            <h4 class="footer-title">联系我们</h4>
            <ul class="contact-info">
              <li>
                <i class="el-icon-location"></i>
                <span>中国北京市朝阳区农业创新产业园B12栋</span>
              </li>
              <li>
                <i class="el-icon-phone"></i>
                <span>400-123-4567</span>
              </li>
              <li>
                <i class="el-icon-message"></i>
                <span>service@agriproduct.com</span>
              </li>
              <li>
                <i class="el-icon-time"></i>
                <span>周一至周日 9:00-22:00</span>
              </li>
            </ul>
            <div class="subscribe-form">
              <h4 class="subscribe-title">订阅我们</h4>
              <div class="form-group">
                <el-input 
                  v-model="email" 
                  placeholder="输入您的邮箱" 
                  class="subscribe-input"
                ></el-input>
                <el-button 
                  type="success" 
                  class="subscribe-btn"
                  @click="handleSubscribe"
                >
                  订阅
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="footer-middle">
      <div class="container">
        <div class="payment-methods">
          <h4>支付方式</h4>
          <div class="payment-icons">
            <i class="payment-icon el-icon-bank-card"></i>
            <i class="payment-icon el-icon-wallet"></i>
            <i class="payment-icon el-icon-money"></i>
            <i class="payment-icon el-icon-coin"></i>
          </div>
        </div>
        <div class="app-download">
          <h4>下载我们的APP</h4>
          <div class="qr-codes">
            <div class="qr-item">
              <div class="qr-placeholder">
                <i class="el-icon-mobile"></i>
              </div>
              <span>安卓版</span>
            </div>
            <div class="qr-item">
              <div class="qr-placeholder">
                <i class="el-icon-mobile"></i>
              </div>
              <span>iOS版</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="footer-bottom">
      <div class="container">
        <div class="copyright">
          &copy; {{ currentYear }} 农产品金融销售平台 版权所有
        </div>
        <div class="certifications">
          <span class="cert-item">
            <i class="el-icon-s-flag"></i> 工商备案
          </span>
          <span class="cert-item">
            <i class="el-icon-document"></i> 经营许可证
          </span>
          <span class="cert-item">
            <i class="el-icon-s-cooperation"></i> 食品安全认证
          </span>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
import Request from '@/utils/request'

export default {
  name: 'FrontFooter',
  data() {
    return {
      categories: [],
      email: '',
      currentYear: new Date().getFullYear()
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    async getCategories() {
      try {
        const res = await Request.get('/category/list')
        if (res.code === '0') {
          this.categories = res.data
        }
      } catch (error) {
        console.error('获取分类失败:', error)
      }
    },
    goToPage(path) {
      this.$router.push(path)
    },
    goToCategory(category) {
      this.$router.push({
        path: '/products',
        query: { categoryId: category.id }
      })
    },
    handleSubscribe() {
      if (!this.email) {
        this.$message.warning('请输入邮箱地址')
        return
      }
      
      // 验证邮箱格式
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailPattern.test(this.email)) {
        this.$message.warning('请输入有效的邮箱地址')
        return
      }
      
      this.$message.success('订阅成功！感谢您的关注')
      this.email = ''
    }
  }
}
</script>

<style scoped>
.modern-footer {
  background-color: #fff;
  color: #333;
  margin-top: 60px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页脚顶部 */
.footer-top {
  padding: 60px 0 40px;
  border-top: 1px solid #eee;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 40px;
}

/* 公司信息栏 */
.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.footer-logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4caf50, #81c784);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.footer-logo-icon i {
  font-size: 24px;
  color: white;
}

.footer-logo-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.footer-logo-text p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #888;
}

.company-description {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: #4caf50;
  color: white;
  transform: translateY(-3px);
}

.social-icon i {
  font-size: 18px;
}

/* 链接列 */
.footer-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #4caf50;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #666;
  font-size: 14px;
  transition: color 0.2s ease;
  cursor: pointer;
}

.footer-links a:hover {
  color: #4caf50;
  padding-left: 5px;
}

/* 联系信息 */
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  display: flex;
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.contact-info i {
  color: #4caf50;
  font-size: 16px;
  margin-right: 10px;
  margin-top: 3px;
}

.subscribe-form {
  margin-top: 25px;
}

.subscribe-title {
  font-size: 15px;
  margin: 0 0 10px;
  color: #333;
}

.form-group {
  display: flex;
}

.subscribe-input {
  flex: 1;
}

.subscribe-btn {
  margin-left: 10px;
  background: #4caf50;
  border-color: #4caf50;
}

.subscribe-btn:hover {
  background: #43a047;
  border-color: #43a047;
}

/* 页脚中部 */
.footer-middle {
  padding: 30px 0;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.footer-middle .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-methods h4,
.app-download h4 {
  font-size: 15px;
  margin: 0 0 15px;
  color: #333;
}

.payment-icons {
  display: flex;
  gap: 15px;
}

.payment-icon {
  font-size: 24px;
  color: #666;
}

.qr-codes {
  display: flex;
  gap: 20px;
}

.qr-item {
  text-align: center;
}

.qr-placeholder {
  width: 80px;
  height: 80px;
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.qr-placeholder i {
  font-size: 30px;
  color: #999;
}

.qr-item span {
  font-size: 12px;
  color: #666;
}

/* 页脚底部 */
.footer-bottom {
  padding: 20px 0;
  background-color: #fff;
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright {
  font-size: 13px;
  color: #888;
}

.certifications {
  display: flex;
  gap: 20px;
}

.cert-item {
  font-size: 13px;
  color: #888;
  display: flex;
  align-items: center;
}

.cert-item i {
  margin-right: 5px;
  color: #4caf50;
}

/* 响应式布局 */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  
  .about-column {
    grid-column: span 2;
  }
  
  .contact-column {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .footer-top {
    padding: 40px 0 20px;
  }
  
  .footer-middle .container {
    flex-direction: column;
    gap: 30px;
  }
  
  .payment-methods,
  .app-download {
    width: 100%;
    text-align: center;
  }
  
  .payment-icons,
  .qr-codes {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .about-column,
  .contact-column {
    grid-column: span 1;
  }
  
  .footer-bottom .container {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .certifications {
    justify-content: center;
    flex-wrap: wrap;
  }
}
</style> 